<template>
    <div class="login-page">

      <van-nav-bar title="登录" left-arrow @click-left="$router.back()" />

      <div class="logo">
        <img src="../../assets/logo.png" >
      </div>

      <van-form @submit="onSubmit">
        <van-field
          required
          v-model="username"
          name="account"
          label="手机号"
          type="tel"
          placeholder="请输入手机号"
          maxlength="11"
          :rules="[
          { required: true, message: '请填写手机号' },
          ]"
        />

        <van-field
          required
          clearable
          v-model="password"
          :type="isShowPwd3 ? 'text' : 'password'"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          :right-icon="isShowPwd3 ? 'eye-o' : 'closed-eye'"
          @click-right-icon="isShowPwd3 = !isShowPwd3"
        />

        <DebounceSubmitBtn
          :checked="checked"
          :isSubmitBtnDisabled="isSubmitBtnDisabled"
          type-name="info"
        />
      </van-form>
      <div class="bottom">
        <van-checkbox v-model="checked" :bind-group="false" style="margin:0 0 10px 30px;">
          <u @click.stop="userAgreement" style="color: #1989fa">用户注册协议</u> 和
          <u @click.stop="privacyAgreement" style="color: #1989fa ">用户隐私协议</u>
        </van-checkbox>
      </div>

      <div class="register_password">
<!--        <div class="register" @click="$router.push('/register')">注册账号</div>-->
        <div class="subAccount" @click="register">立即注册</div>
        <div class="password" @click="$router.push('/subAccount')" >忘记密码</div>
       
      </div>


    </div>
</template>

<script>
import DebounceSubmitBtn from "../../components/DebounceSubmitBtn";
import {mixin_btnStatus} from "../../mixin/mixin_btn";
import {Toast} from 'vant'
  export default {
    name: 'login',
    components: {
      DebounceSubmitBtn,
    },
    mixins: [mixin_btnStatus],
    data() {
      return {
        isShowPwd3: false,
        username: '',
        password: '',
        checked: false,
      };
    },
    methods: {
      userAgreement() {
        this.$router.push('/userAgreement')
      },
      privacyAgreement(){
        this.$router.push('/privacyAgreement')
      },
      async onSubmit(values) {
        if(!this.checked){
          Toast('请同意用户注册协议和用户隐私协议')
          return
        }
        this._updateSubmitBtnStatus();
        await this.$store.dispatch('getLoginCertificate', values);
        await this.$store.dispatch('getUserAllInfo');
        // return console.log(this.$route);
        if(!this.$route.query.redirect){
          return await this.$router.replace('/');

        }
        await this.$router.go(-1);
      },
      register(){
        this.$router.push('/register')
      }
    },
  }
</script>

<style lang="scss" scoped>

  .login-page{
    width: 100%;
    .logo{
      height: 100px;
      width: 100px;
      margin: 30px auto 15px auto;
      img{
        width: 100%;
        border-radius: 50%;
      }
    }
    .bottom{
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      .register{
        color:#529DE6;
        font-size:14px;
      }
    }
    .register_password{
      margin-top: 40px;
      color: #529DE6;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .register{
        border-right: 1px solid black;
        padding-right: 10px;
      }
      .password{
        margin-left: 10px;
        // border-right: 1px solid black;
        padding-right: 10px;
      }
      .subAccount{
        margin-left: 10px;
      }
    }
  }

</style>
